<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${ctx}/css/cssreset-min.css"/>
<style type="text/css">
  .shoppingCartTitle{  
  	width:100%;
  	height:29px;
  	margin-top:10px;
  	line-height:29px;
    display:block;
    list-style:none;
  }
  .shoppingCartTitle li,.prodItem li{
    display:block; 
    border-width:0 0 1px 1px;
    border-color:#CCCCCC;
    border-style:solid ;
    text-align:center;
    float: left;
    position:relative;
  }   
  .shoppingCartTitle li{
     border-top:1px solid #CCCCCC;
  }
  .prodItem{
    line-height:74px;  
  	display:block;
  	clear:both;
    list-style:none;
  }
  .prodItem li{
 	height: 74px;
  }    
  .clear{
     clear: both;
  }
  .row1{
     border:1px soild #CCCCCC;
     width:40%;
  }
  .row2{
     width:17%;
  }
   .row3{
     width:24%;
  }
  li.row4{    
     width:17%;
     border-right:1px solid #CCCCCC;
  }
  .row1 img{
     float:left;
     margin:10px 20px;
  }
  .shpcart_total{
     margin:10px 5px;
  }
  .row3 input{
  	width: 36px;
	height: 19px;
	border: 1px solid #C4C4C4;
	background: white;
	float: left;
	margin:27px 20px;
	text-align: center;
	line-height: 19px;
	font-size: 12px;
  }
  .row3 a{
  	width: 17px;
	height: 8px;
	float: left;
	display: block;
	margin-top: 1px;
	font-size: 0;
	line-height: 0;
	border: 1px solid #C9C9C9;
	text-indent: -9999px;
  }
  .shpcart_total p a,.shpcart_total p span{
     float: right;
     text-align: center;
  }
  .shpcart_total p{
  	 diplay:block;
  	 clear:both;
  }
  .price{
  	 display:block;
  	 float:right;
  	 clear:both;
  }
  .blance{
     display:block;
  }
  .blance a{
  	 display:block;
  	 float:right;
  	 margin: 0 10px;
  }
</style>
<title>Shopping Cart</title>
</head>
<body>
<ul class="shoppingCartTitle">
    <li class="row1">Product Name</li>
    <li class="row2">Price</li>
    <li class="row3">Quantity</li>
    <li class="row4">Opetion</li>
</ul>
<div style="width:100%;"> 
 <s:iterator value="products" id="prod"> 
 <ul class="prodItem">
      <li class="row1"><img src="/img/aa_x.jpg"/><span><s:property default="" value="name"/></span></li>
      <li class="row2"><s:property default="" value="price"/></li>
      <li class="row3"><input type="text" class="num" value="2"/>
      <a class="add">+</a><a class="cut">-</a></li>
      <li class="row4">49944</li>
 </ul>
 </s:iterator>
 <div class="clear"></div>
</div>
<div class="shpcart_total">
    <p class="price">Total count :<span>$</span><span id="total_count">170</span>
    </p>
    <p class="blance">
      <a class="tinue">Continue Shopping</a>
      <a class="dd">Check out</a>
    </p>
</div>
</body>
</html>